import React from 'react';
import {Layout, Typography} from "antd";
import {Footer} from "antd/es/layout/layout";
import MyContent from "./components/MyContent";
import MyHeader from "./components/MyHeader";

function App() {

  const layoutStyle: React.CSSProperties = {
    height: '100vh',
    display: "flex",
    backgroundImage: `url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ)`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
  };

  const headerStyle: React.CSSProperties = {
    textAlign: 'center',
    color: '#fff',
    height: '15%',
    backgroundColor: "transparent"
  };

  const contentStyle: React.CSSProperties = {
    flex: 1,
    overflowX: "hidden",
    overflowY: "auto",
    textAlign: 'center',
    margin: '50px',
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: "transparent"
  };

  const footerStyle: React.CSSProperties = {
    textAlign: 'center',
    color: 'rgb(255,39,130)',
    height: '5%',
    backgroundColor: "transparent"
  };

  return (
    <Layout style={layoutStyle}>
      <MyHeader styles={headerStyle}/>
      <MyContent styles={contentStyle}/>
      <Footer style={footerStyle}>
        <Typography.Text strong code>
          可在多种设备快速生成图画，帮助用户实现轻松、快捷的操作
        </Typography.Text>
      </Footer>
    </Layout>
  );
}

export default App;
